import styled from "@emotion/styled";
import { Menu } from "antd";
import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { EpicView } from "./epic";
import { KanBanView } from "./kanban";

export const ProjectDetailView = () => {
  return (
    <Container>
      <AsideMenu />
      <Main>
        <Routes>
          <Route path="/kanban" element={<KanBanView />} />
          <Route path="/epic" element={<EpicView />} />
          <Route path="" element={<Navigate to="kanban" replace />} />
        </Routes>
      </Main>
    </Container>
  );
};

const AsideMenu = () => {
  const urls = useLocation().pathname.split("/");
  const selectKey = urls[urls.length - 1];
  return (
    <Aside>
      <Menu
        mode="inline"
        selectedKeys={[selectKey]}
        items={[
          {
            key: "kanban",
            label: <Link to="kanban">看板</Link>,
          },
          {
            key: "epic",
            label: <Link to="epic">任务组</Link>,
          },
        ]}
      />
    </Aside>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
`;
const Aside = styled.aside`
  background-color: rgb(244, 245, 247);
  display: flex;
`;
const Main = styled.div`
  display: flex;
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
`;
